<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { BmCityList, BaiduMap, BmPolygon, BmNavigation, BmGeolocation, BmOverviewMap } from 'vue-baidu-map-3x'
const data1 = withDefaults(defineProps<{
  mapInfo?: any
}>(), {
  mapInfo: {
    longitude: 123.162626,
    latitude: 41.2669,
    polygon: []
  }
})
// 绘制
let bol = ref<boolean>(false)
const huizhi = () => {
  if (!bol.value) {
    bol.value = true
  } else if (bol.value) {
    bol.value = false
  }
}
const updatePolygonPath = (e: any) => {
  data1.mapInfo.polygon = e.target.getPath()
};
// 保存
const save = () => {

}
</script>

<template>
  <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
    <div class="search">
      <el-button :class="['btn', { 'btn1': data1.mapInfo.polygon.length }]" :disabled="!data1.mapInfo.polygon.length"
        @click="huizhi">{{ !bol ? '绘制范围' : '完成' }}</el-button>
      <el-button color="#e15536" v-show="bol" size="small" @click="save">保存</el-button>
      <el-button color="#e15536" v-show="bol" size="small" @click="bol = false">取消绘制</el-button>
    </div>
    <baidu-map class="map" ak="8wqTbVZcy90G9o8N5Cn91aWAHNVwgIh3" v="3.0" type="API"
      :center="{ lng: data1.mapInfo.longitude, lat: data1.mapInfo.latitude }" :zoom="12" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-geolocation style="margin-bottom: 80px;" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
        :autoLocation="true"></bm-geolocation>
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_LEFT" :isOpen="true"></bm-overview-map>
      <bm-polygon :editing="bol" @lineupdate="updatePolygonPath" :path="data1.mapInfo.polygon" stroke-color="blue"
        :stroke-opacity="0.5" :stroke-weight="2" />
    </baidu-map>
  </div>
</template>

<style scoped>
.search {
  height: 70px;
  width: 1400px;
  min-width: 800px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.btn {
  font-size: 14px;
  width: 158px;
  height: 40px;
}

.btn1 {
  color: #e15536;
  background: #ffeeeb;
  border: 1px solid #f3917c;
  border-radius: 4px;
  cursor: pointer;
}

.map {
  width: 1400px;
  min-width: 800px;
  height: 740px;
  /* min-width: 300px; */
}
</style>